/*
登录状态的app
 */
import React from "react";
import ProjectList from "screens/ProjectList";
import { useAuth } from "./context/auth-context";
import styled from "@emotion/styled";
import { ButtonNoPadding, Row } from "./components/lib";
import { ReactComponent as SoftwareLogo } from "assets/software-logo.svg";
import { Button, Dropdown, Menu } from "antd";
import { Navigate, Route, Routes } from "react-router";
import { BrowserRouter } from "react-router-dom";
import Project from "./screens/Project";
import { resetRoute } from "./utils";
import ProjectModel from "./screens/ProjectList/projectModel";
import ProjectPopover from "./components/projectPopover";
import UserPopover from "./components/userPopover";

/**
 * grid 和 flex 各自的应用场景
 * 1. 要考虑，是一维布局 还是 二维布局
 * 一般来说，一维布局用flex，二维布局用grid
 * 2. 是从内容出发还是从布局出发？
 * 从内容出发：你先有一组内容(数量一般不固定),然后希望他们均匀的分布在容器中，由内容自己的大小决定占据的空间
 * 从布局出发：先规划网格(数量一般比较固定)，然后再把元素往里填充
 * 从内容出发，用flex
 * 从布局出发，用grid
 *
 */
export default function UnauthenticatedApp() {
  return (
    <Container>
      <BrowserRouter>
        <PageHeader />
        <Main>
          <Routes>
            <Route path={"/"} element={<Navigate to="/projects" />}></Route>
            <Route path={"/projects"} element={<ProjectList />}></Route>
            <Route
              path={"/projects/:projectId/*"}
              element={<Project />}
            ></Route>
          </Routes>
        </Main>
        <ProjectModel />
      </BrowserRouter>
    </Container>
  );
}
const PageHeader = () => {
  return (
    <Header between={true}>
      <HeaderLeft gap={true}>
        <ButtonNoPadding type={"link"} onClick={resetRoute}>
          <SoftwareLogo width={"18rem"} color={"rgb(38,132,255)"} />
        </ButtonNoPadding>
        <ProjectPopover />
        <UserPopover />
      </HeaderLeft>
      <HeaderRight>
        <User />
      </HeaderRight>
    </Header>
  );
};

const User = () => {
  const { logout, user } = useAuth();

  return (
    <Dropdown
      overlay={
        <Menu
          items={[
            {
              label: "登出",
              key: "logout",
              onClick: logout,
            },
          ]}
        />
      }
    >
      <Button type={"link"} onClick={(e) => e.preventDefault()}>
        Hi,{user?.name}
      </Button>
    </Dropdown>
  );
};

const Container = styled.div`
  display: grid;
  grid-template-rows: 6rem 1fr; //row 大小
  height: 100vh;
`;
const Header = styled(Row)`
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`;
const HeaderLeft = styled(Row)``;
const HeaderRight = styled.div``;

const Main = styled.main`
  display: flex;
  overflow: hidden;
`;

// const PageHeader = styled.header`
// height: 6rem;
// `;

// const Container = styled.div`
// display: grid;
// grid-template-rows: 6rem 1fr 6rem; //row 大小
// grid-template-columns: 20rem 1fr 20rem; //column 大小
// grid-template-areas:
// "header header header"
// "nav main aside"
// "footer footer footer"; // 排布的方式
// height: 100vh;
// grid-gap: 10rem; //各模块之间的间隔
// `;

// const Header = styled.header`
// grid-area: header;// 排布的名字
// `;
// const Nav = styled.header`
// grid-area: nav;
// `;
// const Main = styled.header`
// grid-area: main;
// `;
// const Side = styled.header`
// grid-area: side;
// `;
// const Footer = styled.header`
// grid-area: footer;
// `;
